<template>
  <div class="system-user-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">
      <el-form ref="interfacesDialogFormRef" :model="state.ruleForm" :rules="rules" size="default" label-width="auto">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="接口名称" prop="interfaceName">
              <el-input v-model="state.ruleForm.interfaceName"
                        placeholder="请输入接口名称"
                        clearable>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="接口路径" prop="interfacePath">
              <el-input v-model="state.ruleForm.interfacePath"
                        placeholder="请输入接口路径"
                        clearable>
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(interfacesDialogFormRef)" size="default">{{
              state.dialog.submitTxt
            }}</el-button>
				</span>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogVisible">
      <img w-full h-full style="width: 100%;height: 100%" :src="dialogImageUrl" alt="Preview Image"/>
    </el-dialog>

  </div>
</template>

<script setup lang="ts" name="interfacesDialog">
import {nextTick, onMounted, reactive, ref} from 'vue';
import type {FormRules, UploadProps, FormInstance} from 'element-plus'
import {ElMessage, UploadUserFile} from "element-plus";

import {useInterfacesApi} from '/@/api/interfaces'

const {listByPage, list, add, edit, removeById} = useInterfacesApi();
// 定义变量内容
const interfacesDialogFormRef = ref<FormInstance>();
const state = reactive({
  visible: {
    isWebShow: false,
    isH5Show: false,
    isMiniProgramShow: false,
  },
  ruleForm: {
    id: '',
    interfaceName: '',
    interfacePath: '',
  },
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  }
});
const fileList = ref<UploadUserFile[]>([])
const imageUrl = ref('')
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const props = defineProps(['orgTree', 'areaOrgTree'])

const rules = reactive<FormRules<RowInterfacesType>>({
  interfaceName: [
    {required: true, message: '接口名称不能为空', trigger: 'blur'},
    {min: 2, max: 100, message: '接口名称长度应该在2到100个字符之间', trigger: 'blur'},
  ],
  interfacePath: [
    {required: true, message: '接口路径不能为空', trigger: 'blur'},
    {min: 3, max: 200, message: '接口路径长度应该在3到200个字符之间', trigger: 'blur'},
  ]
})

// 打开弹窗
const openDialog = async (type: string, row: RowInterfacesType) => {
  if (type === 'edit') {
    state.dialog.title = '修改接口';
    state.ruleForm = row;
  } else {
    state.dialog.title = '新增接口';
    fileList.value = [];
    state.ruleForm = {
      id: '',
      interfaceName: '',
      interfacePath: '',
    }
  }
  state.dialog.submitTxt = '保 存';
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    console.log('validated', state.ruleForm)
    if (!valid) {
      console.log('error submit!!', fields);
      ElMessage.error('数据校验失败!');
      return false;
    }
    const res = state.ruleForm.id ? await edit(state.ruleForm) : await add(state.ruleForm)
    if (res.status === 200) {
      ElMessage.success(state.ruleForm.id ? '更改成功' : '新增成功');
    }
    closeDialog();
    emit('refresh');
  });
};

onMounted(() => {

})

// 暴露变量
defineExpose({
  openDialog,
});
</script>
<style scoped lang="scss">
.croppers-container {
  .cropper-img-warp {
    text-align: center;

    .cropper-img {
      margin: auto;
      width: 150px;
      height: 150px;
      border-radius: 100%;
    }
  }
}
</style>
